import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: window
    width: 1000
    height: 700
    visible: true
    title: "Element UI Python QtQuick 演示"
    
    // 背景色随主题变化
    color: ThemeController.bgBase
    
    ScrollView {
        anchors.fill: parent
        anchors.margins: 20
        
        ColumnLayout {
            width: window.width - 40
            spacing: 30
            
            // 标题区域
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 80
                color: ThemeController.primaryColor
                radius: 8
                
                RowLayout {
                    anchors.centerIn: parent
                    spacing: 20
                    
                    Text {
                        text: "🎨"
                        font.pixelSize: 32
                    }
                    
                    Column {
                        Text {
                            text: "Element UI Python QtQuick"
                            font.pixelSize: 24
                            font.weight: Font.Bold
                            color: "white"
                        }
                        Text {
                            text: "当前主题: " + ThemeController.currentTheme
                            font.pixelSize: 14
                            color: "white"
                            opacity: 0.9
                        }
                    }
                }
            }
            
            // 主题切换区域
            GroupBox {
                title: "主题管理"
                Layout.fillWidth: true
                
                RowLayout {
                    spacing: 15
                    
                    Text {
                        text: "选择主题:"
                        color: ThemeController.textPrimary
                    }
                    
                    ButtonGroup {
                        id: themeGroup
                    }
                    
                    Repeater {
                        model: ThemeController.availableThemes
                        
                        RadioButton {
                            text: modelData === "element-default" ? "默认主题" : 
                                  modelData === "element-dark" ? "暗色主题" : modelData
                            checked: ThemeController.currentTheme === modelData
                            ButtonGroup.group: themeGroup
                            
                            onCheckedChanged: {
                                if (checked) {
                                    ThemeController.switchTheme(modelData)
                                }
                            }
                        }
                    }
                }
            }
            
            // 颜色展示区域
            GroupBox {
                title: "Element UI 颜色系统"
                Layout.fillWidth: true
                
                GridLayout {
                    columns: 5
                    columnSpacing: 20
                    rowSpacing: 15
                    
                    // 主要颜色
                    ColorSwatch { 
                        colorName: "Primary"
                        colorValue: ThemeController.primaryColor 
                    }
                    ColorSwatch { 
                        colorName: "Success"
                        colorValue: ThemeController.successColor 
                    }
                    ColorSwatch { 
                        colorName: "Warning"
                        colorValue: ThemeController.warningColor 
                    }
                    ColorSwatch { 
                        colorName: "Danger"
                        colorValue: ThemeController.dangerColor 
                    }
                    ColorSwatch { 
                        colorName: "Info"
                        colorValue: ThemeController.infoColor 
                    }
                }
            }
            
            // 按钮组件展示
            GroupBox {
                title: "Button 按钮组件"
                Layout.fillWidth: true
                
                ColumnLayout {
                    spacing: 20
                    
                    // 不同类型的按钮
                    RowLayout {
                        spacing: 15
                        
                        Text {
                            text: "按钮类型:"
                            color: ThemeController.textPrimary
                        }
                        
                        ElementButton { 
                            text: "Default"
                            buttonType: "default"
                        }
                        ElementButton { 
                            text: "Primary"
                            buttonType: "primary"
                        }
                        ElementButton { 
                            text: "Success"
                            buttonType: "success"
                        }
                        ElementButton { 
                            text: "Warning"
                            buttonType: "warning"
                        }
                        ElementButton { 
                            text: "Danger"
                            buttonType: "danger"
                        }
                        ElementButton { 
                            text: "Info"
                            buttonType: "info"
                        }
                    }
                    
                    // 不同尺寸的按钮
                    RowLayout {
                        spacing: 15
                        
                        Text {
                            text: "按钮尺寸:"
                            color: ThemeController.textPrimary
                        }
                        
                        ElementButton { 
                            text: "Large"
                            buttonType: "primary"
                            size: "large"
                        }
                        ElementButton { 
                            text: "Medium"
                            buttonType: "primary"
                            size: "medium"
                        }
                        ElementButton { 
                            text: "Small"
                            buttonType: "primary"
                            size: "small"
                        }
                        ElementButton { 
                            text: "Mini"
                            buttonType: "primary"
                            size: "mini"
                        }
                    }
                    
                    // 特殊状态按钮
                    RowLayout {
                        spacing: 15
                        
                        Text {
                            text: "按钮状态:"
                            color: ThemeController.textPrimary
                        }
                        
                        ElementButton { 
                            text: "Normal"
                            buttonType: "primary"
                        }
                        ElementButton { 
                            text: "Loading"
                            buttonType: "primary"
                            loading: true
                        }
                        ElementButton { 
                            text: "Disabled"
                            buttonType: "primary"
                            enabled: false
                        }
                        ElementButton { 
                            text: "Round"
                            buttonType: "success"
                            round: true
                        }
                    }
                }
            }
            
            // 输入框组件展示
            GroupBox {
                title: "Input 输入框组件"
                Layout.fillWidth: true
                
                ColumnLayout {
                    spacing: 15
                    
                    RowLayout {
                        spacing: 15
                        
                        Text {
                            text: "输入框:"
                            color: ThemeController.textPrimary
                            Layout.preferredWidth: 80
                        }
                        
                        TextField {
                            placeholderText: "请输入内容"
                            Layout.preferredWidth: 200
                            
                            // 应用Element UI样式
                            property var inputStyle: StyleProvider.getInputStyle("medium", "normal")
                            
                            background: Rectangle {
                                color: ThemeController.bgBase
                                border.color: parent.activeFocus ? ThemeController.primaryColor : ThemeController.borderBase
                                border.width: 1
                                radius: 4
                                
                                Behavior on border.color {
                                    ColorAnimation { duration: 200 }
                                }
                            }
                            
                            color: ThemeController.textRegular
                            selectionColor: ThemeController.primaryColor
                        }
                        
                        TextField {
                            placeholderText: "禁用状态"
                            enabled: false
                            Layout.preferredWidth: 200
                            
                            background: Rectangle {
                                color: "#F5F7FA"
                                border.color: ThemeController.borderLight
                                border.width: 1
                                radius: 4
                            }
                            
                            color: ThemeController.textSecondary
                        }
                    }
                }
            }
            
            // 交互演示区域
            GroupBox {
                title: "交互演示"
                Layout.fillWidth: true
                
                ColumnLayout {
                    spacing: 15
                    
                    Text {
                        text: "点击下面的按钮测试交互效果:"
                        color: ThemeController.textPrimary
                    }
                    
                    RowLayout {
                        spacing: 15
                        
                        ElementButton {
                            text: "显示消息"
                            buttonType: "primary"
                            
                            onClicked: {
                                messageText.text = "Hello Element UI! 当前时间: " + new Date().toLocaleTimeString()
                                messageRect.visible = true
                                hideTimer.restart()
                            }
                        }
                        
                        ElementButton {
                            text: "切换主题"
                            buttonType: "success"
                            
                            onClicked: {
                                var nextTheme = ThemeController.currentTheme === "element-default" ? 
                                              "element-dark" : "element-default"
                                ThemeController.switchTheme(nextTheme)
                            }
                        }
                        
                        ElementButton {
                            text: "重置"
                            buttonType: "warning"
                            
                            onClicked: {
                                messageRect.visible = false
                                ThemeController.switchTheme("element-default")
                            }
                        }
                    }
                    
                    // 消息显示区域
                    Rectangle {
                        id: messageRect
                        Layout.fillWidth: true
                        height: 50
                        color: ThemeController.successColor
                        radius: 6
                        visible: false
                        
                        Text {
                            id: messageText
                            anchors.centerIn: parent
                            color: "white"
                            font.pixelSize: 14
                        }
                        
                        Timer {
                            id: hideTimer
                            interval: 3000
                            onTriggered: messageRect.visible = false
                        }
                    }
                }
            }
        }
    }
    
    // 颜色色板组件
    component ColorSwatch: Column {
        property string colorName: ""
        property string colorValue: ""
        
        spacing: 8
        
        Rectangle {
            width: 80
            height: 60
            color: colorValue
            radius: 6
            border.width: 1
            border.color: ThemeController.borderLight
            
            // 颜色值文本
            Text {
                anchors.centerIn: parent
                text: colorValue
                color: {
                    // 根据背景颜色选择文本颜色
                    var r = parseInt(colorValue.substr(1, 2), 16)
                    var g = parseInt(colorValue.substr(3, 2), 16)
                    var b = parseInt(colorValue.substr(5, 2), 16)
                    var brightness = (r * 299 + g * 587 + b * 114) / 1000
                    return brightness > 128 ? "#000000" : "#FFFFFF"
                }
                font.pixelSize: 10
                font.family: "Consolas, Monaco, monospace"
            }
        }
        
        Text {
            text: colorName
            color: ThemeController.textPrimary
            font.pixelSize: 12
            horizontalAlignment: Text.AlignHCenter
            width: parent.width
        }
    }
    
    // Element UI 风格按钮组件
    component ElementButton: Button {
        id: elementButton
        
        property string buttonType: "default"
        property string size: "medium"
        property bool loading: false
        property bool round: false
        
        // 获取样式配置
        property var styleConfig: StyleProvider.getButtonStyle(buttonType, size)
        
        // 应用样式
        implicitHeight: parseInt(styleConfig.height || "36")
        implicitWidth: Math.max(parseInt(styleConfig.minimumWidth || "80"), 
                               contentItem.implicitWidth + leftPadding + rightPadding)
        
        // 内边距
        leftPadding: 20
        rightPadding: 20
        
        background: Rectangle {
            color: {
                if (!elementButton.enabled) return "#F5F7FA"
                if (elementButton.pressed) return Qt.darker(getBackgroundColor(), 1.1)
                if (elementButton.hovered) return Qt.lighter(getBackgroundColor(), 1.1)
                return getBackgroundColor()
            }
            
            border.width: 1
            border.color: getBorderColor()
            radius: round ? height / 2 : 4
            
            function getBackgroundColor() {
                switch(buttonType) {
                    case "primary": return ThemeController.primaryColor
                    case "success": return ThemeController.successColor
                    case "warning": return ThemeController.warningColor
                    case "danger": return ThemeController.dangerColor
                    case "info": return ThemeController.infoColor
                    default: return ThemeController.bgBase
                }
            }
            
            function getBorderColor() {
                return buttonType === "default" ? ThemeController.borderBase : getBackgroundColor()
            }
            
            Behavior on color { ColorAnimation { duration: 200 } }
            Behavior on border.color { ColorAnimation { duration: 200 } }
        }
        
        contentItem: Row {
            spacing: 8
            anchors.centerIn: parent
            
            // 加载动画
            Rectangle {
                width: 12
                height: 12
                radius: 6
                color: getTextColor()
                visible: elementButton.loading
                
                RotationAnimation on rotation {
                    running: elementButton.loading
                    loops: Animation.Infinite
                    from: 0
                    to: 360
                    duration: 1000
                }
                
                Rectangle {
                    width: 2
                    height: 6
                    color: parent.color
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top
                    anchors.topMargin: 1
                }
            }
            
            // 按钮文本
            Text {
                text: elementButton.text
                color: getTextColor()
                font.pixelSize: getSizeConfig().fontSize || 14
                visible: !elementButton.loading
                
                function getSizeConfig() {
                    switch(size) {
                        case "large": return { fontSize: 16 }
                        case "small": return { fontSize: 13 }
                        case "mini": return { fontSize: 12 }
                        default: return { fontSize: 14 }
                    }
                }
            }
            
            function getTextColor() {
                if (!elementButton.enabled) return "#C0C4CC"
                return buttonType === "default" ? ThemeController.textRegular : "white"
            }
        }
        
        // 按下效果
        Behavior on scale { NumberAnimation { duration: 100 } }
        onPressedChanged: scale = pressed ? 0.98 : 1.0
    }
}